<!-- SDK维护配置弹窗 -->
<template>
    <el-dialog
      title="SDK维护配置"
      :visible="visible"
      width="550px"
      @update:visible="updateVisible"
      @open="queryForm"
    >
        <el-form ref="form" :model="form" label-width="100px">
            <el-tabs v-model="active">
                <el-tab-pane label="登录相关" name="login"></el-tab-pane>
                <el-tab-pane label="充值相关" name="topUp"></el-tab-pane>
                <el-tab-pane label="注册相关" name="register"></el-tab-pane>
            </el-tabs>
            <div v-if="active=='login'">
                <el-form-item label="登录状态:">
                            <el-select
                                clearable
                                v-model="form.login_switch"
                                style="width:100%;"
                                placeholder="请选择登录状态"
                            >
                                <el-option :value="0" label="关闭"/>
                                <el-option :value="1" label="开启"/>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="关闭提示语:">
                            <el-input
                                v-model="form.login_site[0].msg"
                                placeholder="请输入关闭提示语"
                                clearable
                                />
                        </el-form-item>
                        <el-form-item label="白名单账号:">
                            <el-input
                            :rows="5"
                            clearable
                            type="textarea"
                            v-model="form.login_site[0].user_white_lists"
                            placeholder="请输入白名单账号"
                            />
                            <div class="tips">多个账号以英文","分割,填写主账号用户id</div>
                        </el-form-item>
                        <el-form-item label="白名单Ip:">
                            <el-input
                            :rows="5"
                            clearable
                            type="textarea"
                            v-model="form.login_site[0].ip_white_lists"
                            placeholder="请输入白名单Ip"
                            />
                            <div class="tips">多个Ip以英文","分割</div>
                        </el-form-item>
            </div>
            <div v-if="active=='topUp'">
                <el-form-item label="充值状态:">
                            <el-select
                                clearable
                                v-model="form.pay_switch"
                                style="width:100%"
                                placeholder="请选择充值状态"
                            >
                                <el-option :value="0" label="关闭"/>
                                <el-option :value="1" label="开启"/>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="关闭提示语:">
                            <el-input
                                v-model="form.pay_site[0].msg"
                                placeholder="请输入关闭提示语"
                                clearable
                                />
                        </el-form-item>
                        <el-form-item label="白名单账号:">
                            <el-input
                            :rows="5"
                            clearable
                            type="textarea"
                            v-model="form.pay_site[0].user_white_lists"
                            placeholder="请输入白名单账号"
                            />
                            <div class="tips">多个账号以英文","分割,填写主账号用户id</div>
                        </el-form-item>
                        <el-form-item label="白名单Ip:">
                            <el-input
                            :rows="5"
                            clearable
                            type="textarea"
                            v-model="form.pay_site[0].ip_white_lists"
                            placeholder="请输入白名单Ip"
                            />
                            <div class="tips">多个Ip以英文","分割</div>
                        </el-form-item>
            </div>
            <div v-if="active=='register'">
                <el-form-item label="注册状态:">
                            <el-select
                                clearable
                                v-model="form.register_switch"
                                style="width:100%"
                                placeholder="请选择注册状态"
                            >
                                <el-option :value="0" label="关闭"/>
                                <el-option :value="1" label="开启"/>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="关闭提示语:">
                            <el-input
                                v-model="form.register_site[0].msg"
                                placeholder="请输入关闭提示语"
                                clearable
                                />
                        </el-form-item>
                        <el-form-item label="白名单Ip:">
                            <el-input
                            :rows="5"
                            clearable
                            type="textarea"
                            v-model="form.register_site[0].ip_white_lists"
                            placeholder="请输入白名单Ip"
                            />
                            <div class="tips">多个Ip以英文","分割</div>
                        </el-form-item>
                    </div>
        </el-form>
        <div slot="footer">
            <el-button @click="updateVisible(false)">取消</el-button>
            <el-button type="primary" @click="save" :loading="loading"
                >保存
            </el-button>
        </div>
    </el-dialog>
</template>
<script>
export default {
    props: {
        // 弹窗是否打开
        visible: Boolean,
        // 修改回显的数据
        data: Object
    },
    data(){
        return{
            form:{
                register_switch:0,
                login_switch:0,
                pay_switch:0,
                register_site:[{ip_white_lists:"",msg:""}],
                login_site:[{msg:"",user_white_lists:"",ip_white_lists:""}],
                pay_site:[{msg:"",user_white_lists:"",ip_white_lists:""}]
            },
            loading:false,
            active:'login',
        }
    },
    methods:{
        //查询sdk配置信息
        queryForm(){
            this.$http.post('/Package/getPackageConfig',{package_id:this.data.id}).then(res=>{
                if(res.data.code === 0){
                    if(res.data.data){
                        this.form=res.data.data
                        if(!res.data.data.login_site||res.data.data.login_site.length==0){
                            let obj=[{msg:"",user_white_lists:"",ip_white_lists:""}]
                            this.$set(this.form,'login_site',obj)
                        }
                        if(!res.data.data.register_site||res.data.data.register_site.length==0){
                            let obj=[{ip_white_lists:"",msg:""}]
                            this.$set(this.form,'register_site',obj)
                        }
                        if(!res.data.data.pay_site||res.data.data.pay_site.length==0){
                            let obj=[{msg:"",user_white_lists:"",ip_white_lists:""}]
                            this.$set(this.form,'pay_site',obj)
                        }
                    }else{
                        this.resetForm()
                    }
                }else{

                    this.$message.error(res.data.msg)
                }
            })
        },
        //充值form
        resetForm(){
            let obj={
                register_switch:0,
                login_switch:0,
                pay_switch:0,
                register_site:[{ip_white_lists:"",msg:""}],
                login_site:[{msg:"",user_white_lists:"",ip_white_lists:""}],
                pay_site:[{msg:"",user_white_lists:"",ip_white_lists:""}]
            }
            this.form=obj
        },
        //保存事件
        save(){
            this.loading = true
            let params={
                package_id:this.data.id
            };
            if(this.active=='login'){
                params.login_switch=this.form.login_switch;
                params.login_site=this.form.login_site;
            }else if(this.active=='topUp'){
                params.pay_switch=this.form.pay_switch;
                params.pay_site=this.form.pay_site;
            }else if(this.active=='register'){
                params.register_switch=this.form.register_switch;
                params.register_site=this.form.register_site;
            }
            this.$http.post('/Package/setPackageSdkWeiHuConfig',params).then(res=>{
                console.log(res.data)
                this.loading = false
                if(res.data.code === 0){
                    this.$message.success('保存成功!')
                    this.resetForm()
                    this.updateVisible(false)
                    this.$emit('done')
                }else{
                    this.$message.error(res.data.msg)
                }
            })
            .catch((e) => {
              this.loading = false
              this.$message.error(e.message)
            })
        },
        /* 更新visible */
        updateVisible(value) {
            this.$emit('update:visible', value)
        }
    }
}
</script>
<style scoped>
::v-deep .el-tab-pane{
    margin-top: 20px;
}
.tips{
    font-size: 12px;
    color: red;
    letter-spacing: 1px;
}
</style>